<template>
  <div>
    <div class="btn">
      <el-button type="warning" plain size="mini" @click="dialogVisible=true">添加</el-button>
    </div>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="()=>dialogVisible=false">
      <el-form  class="form" ref="form" :rules="rule" label-position="right" label-width="80px" :model="userMap">
                <el-form-item label="用户名" prop="username">
                    <el-input placeholder="请输入用户名" v-model="userMap.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="userMap.password"  ></el-input>
                </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_handler">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
        stripe
        border
        :data="lists"
        style="width: 100%">
        <el-table-column
          label="id"
          prop="id">
        </el-table-column>
        <el-table-column
          label="角色"
          prop="role_name">
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="username">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="pageMap.key"
              size="mini"
              placeholder="输入关键字搜索" @keyup.enter.native="search_handler"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"  :disabled="scope.row.role_id!=2">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
      <div class="page">
        <el-pagination
        layout="prev, pager, next"
        :total="total"
        @prev-click="current_change"
        @next-click="current_change"
        @current-change="current_change">
      </el-pagination>
      </div>
     
  </div>
</template>
<script>
import { add_user, del_user, info } from '@/api/user_api';
import { AES_Encrypt } from '@/util/aes';

export default{
  data(){
    return{
      rule:{
          username:[
            {required:true,message:'用户名不可为空',trigger:'blur'}
          ],
          password:[
            {required:true,message:'密码不可为空',trigger:'blur'},
          ]
      },
      dialogVisible:false,
      lists:[],
      userMap:{
        username:"",
        password:""
      },
      pageMap:{
        limit:10,
        now_page:1,
        key:""
      },
      total:0
    }
  },
  methods:{
    current_change(page){
      this.pageMap.now_page = page
      this.user_info()
    },
    async dialog_handler(){
      this.$refs['form'].validate(async (valid)=>{
        if(valid){
          this.userMap.password = AES_Encrypt(this.userMap.password)
          const {data:res} = await add_user(this.userMap)
          this.$message({
            type:res.code==200?'success':'error',
            message:res.message
          })
          this.dialogVisible = false
          this.user_info()
          this.userMap={
            username:"",
            password:""
          }
        }else{
          return false;
        }
      })
    },
     handleDelete(index,row){
       this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data:res} = await del_user(row.id)
          this.$message({
            type: res.code==200?'success':'error',
            message: res.message
          });
          if(res.code==200)this.user_info()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     search_handler(){
      this.pageMap.now_page = 1
      this.user_info()
      this.pageMap.key = ""
    },
    async user_info(){
      const {data:res} = await info(this.pageMap)
      this.lists =  res.data.list
      this.total = res.data.total
    }
  },
  created(){
    this.user_info()
  }
}
</script>
<style lang="scss" scoped>
.page{
  float: right;
  margin-top: 2%;
}
.btn{
  margin-bottom: 2%;
}
</style>